<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的在线简历</title>
    <link rel="stylesheet" href="styles.css">

    <style>
        .crawler-section {
            margin: 20px 0;
            padding: 15px;
            background-color: #f5f5f5;
            border-radius: 5px;
        }
        .crawler-input {
            padding: 8px;
            width: 300px;
            margin-right: 10px;
        }
        .crawler-button {
            padding: 8px 15px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .crawler-button:hover {
            background-color: #45a049;
        }
        .error-message {
            color: red;
            margin-top: 10px;
        }
        /* styles.css */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

header {
    background-color: #0073e6;
    color: white;
    padding: 20px;
    text-align: center;
}

header .profile-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 10px;
}

header h1 {
    margin: 0;
    font-size: 2em;
}

header p {
    margin: 5px 0;
}

.contact-info {
    margin-top: 10px;
}

.contact-info a {
    color: white;
    text-decoration: none;
}

.contact-info a:hover {
    text-decoration: underline;
}

.section {
    background-color: white;
    margin: 20px;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.section h2 {
    border-bottom: 2px solid #0073e6;
    padding-bottom: 10px;
    color: #0073e6;
}

.content {
    margin-top: 15px;
}

.content h3 {
    margin-top: 10px;
    color: #333;
}

ul {
    list-style-type: disc;
    margin-left: 20px;
}

footer {
    text-align: center;
    padding: 10px;
    background-color: #0073e6;
    color: white;
    margin-top: 20px;
}
    </style>
</head>
<body>
    <div class="crawler-section">
        <h2>简历爬取功能</h2>
        <input type="text" id="resumeUrl" class="crawler-input" placeholder="输入简历URL (如: http://example.com/resume)">
        <button onclick="fetchResume()" class="crawler-button">爬取并展示</button>
        <div id="errorMessage" class="error-message"></div>
    </div>

    <header>
        <div class="profile">
            <img src="/static/profile.jpg" alt="个人照片" class="profile-img" id="profileImg">
            <h1 id="name">罗崇翔</h1>
            <p id="jobIntention">求职意向：PG电子开发工程师</p>
        </div>
        <div class="contact-info">
            <p id="phone">电话: 123-4567-890</p>
            <p id="email">邮箱: zhangsan@example.com</p>
            <p>GitHub: <a href="https://gitee.com/i-am-not-li-hua" target="_blank" id="github">神也渡李华</a></p>
        </div>
    </header>

    <section class="section">
        <h2>教育背景</h2>
        <div class="content" id="education">
            <p><strong>海南经贸职业技术学院</strong> - 软件技术专业</p>
            <p>2019.09 - 2023.06</p>
            <p>主修课程: Java编程、数据库原理、Web开发、数据结构与算法</p>
        </div>
    </section>

    <section class="section">
        <h2>技能专长</h2>
        <div class="content" id="skills">
            <ul>
                <li>熟练掌握Java、Python编程语言</li>
                <li>熟悉Spring Boot、MyBatis等开发框架</li>
                <li>熟悉MySQL、Oracle数据库</li>
                <li>熟悉HTML、CSS、JavaScript等前端技术</li>
                <li>熟悉Linux操作系统和Git版本控制工具</li>
            </ul>
        </div>
    </section>

    <section class="section">
        <h2>项目经验</h2>
        <div class="content" id="projects">
            <h3>在线图书管理系统</h3>
            <p><strong>项目时间:</strong> 2022.03 - 2022.06</p>
            <p><strong>项目描述:</strong> 基于Spring Boot和MySQL开发的图书管理系统，支持图书的增删改查、借阅归还等功能。</p>
            <p><strong>个人职责:</strong> 负责后端开发，设计数据库表结构，实现RESTful API接口。</p>
            <p><strong>技术栈:</strong> Java, Spring Boot, MySQL, HTML, CSS, JavaScript</p>
        </div>
        <div class="content">
            <h3>个人博客网站</h3>
            <p><strong>项目时间:</strong> 2021.09 - 2021.12</p>
            <p><strong>项目描述:</strong> 使用Django框架开发的个人博客网站，支持文章发布、评论、用户注册登录等功能。</p>
            <p><strong>个人职责:</strong> 负责前后端开发，部署到Linux服务器。</p>
            <p><strong>技术栈:</strong> Python, Django, SQLite, HTML, CSS, JavaScript</p>
        </div>
    </section>

    <section class="section">
        <h2>获奖情况</h2>
        <div class="content" id="awards">
            <ul>
                <li>先进个人</li>
            </ul>
        </div>
    </section>

    <section class="section">
        <h2>自我评价</h2>
        <div class="content" id="selfEvaluation">
            <p>热爱编程，具备扎实的Java开发基础，熟悉常见开发框架和工具。有较强的学习能力和团队合作精神，能够快速适应新技术和新环境。</p>
        </div>
    </section>

    <footer>
        <p>© 2023 罗崇翔. 版权所有.</p>
    </footer>

    <script>
        async function fetchResume() {
            const url = document.getElementById('resumeUrl').value.trim();
            const errorElement = document.getElementById('errorMessage');
            
            if (!url) {
                errorElement.textContent = "请输入有效的URL";
                return;
            }
            
            errorElement.textContent = "";
            
            try {
                // 显示加载状态
                errorElement.textContent = "正在爬取简历数据，请稍候...";
                
                // 调用后端API (需要部署pc.py作为后端服务)
                const response = await fetch(`/crawl-resume?url=${encodeURIComponent(url)}`);
                
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                
                const resumeData = await response.json();
                
                // 更新页面内容
                updateResumeDisplay(resumeData);
                errorElement.textContent = "简历数据已成功加载并展示！";
                
            } catch (error) {
                errorElement.textContent = `爬取失败: ${error.message}`;
                console.error('Error:', error);
            }
        }
        
        function updateResumeDisplay(data) {
        // 更新基本信息
        if (data.basic_info) {
            if (data.basic_info.name) {
                document.getElementById('name').textContent = data.basic_info.name;
            }
            if (data.basic_info.job_intention) {
                document.getElementById('jobIntention').textContent = data.basic_info.job_intention;
            }
            if (data.basic_info.contact) {
                if (data.basic_info.contact.phone) {
                    document.getElementById('phone').textContent = `电话: ${data.basic_info.contact.phone}`;
                }
                if (data.basic_info.contact.email) {
                    document.getElementById('email').textContent = `邮箱: ${data.basic_info.contact.email}`;
                }
                if (data.basic_info.contact.github) {
                    const githubLink = document.getElementById('github');
                    githubLink.href = data.basic_info.contact.github;
                    githubLink.textContent = data.basic_info.contact.github.split('/').pop() || 'GitHub';
                }
            }
        }
        
        // 更新各个部分
        if (data.sections && data.sections.length > 0) {
            data.sections.forEach(section => {
                const sectionId = getSectionId(section.title);
                if (sectionId) {
                    const element = document.getElementById(sectionId);
                    if (element) {
                        if (section.title === "技能专长" || section.title === "获奖情况") {
                            element.innerHTML = `<ul>${
                                section.content.map(item => `<li>${item}</li>`).join('')
                            }</ul>`;
                        } else {
                            element.innerHTML = section.content.map(item => `<p>${item}</p>`).join('');
                        }
                    }
                }
            });
        }
        
        // 动态更新图片路径
        if (data.images && data.images.length > 0) {
            const profileImg = document.getElementById('profileImg');
            if (data.images[0].filename) {
                // 添加时间戳防止缓存
                const timestamp = new Date().getTime();
                profileImg.src = `/get-image/${data.images[0].filename}?t=${timestamp}`;
            } else if (data.images[0].url) {
                // 如果图片下载失败，直接使用原始URL
                profileImg.src = data.images[0].url;
            }
        }
    }
        
        function getSectionId(title) {
            const mapping = {
                "教育背景": "education",
                "技能专长": "skills",
                "项目经验": "projects",
                "获奖情况": "awards",
                "自我评价": "selfEvaluation"
            };
            return mapping[title] || null;
        }
    </script>
</body>
</html>